{% extends "bg/blank.html" %}
{% block title %}{% endblock %}
{% block css %}{% endblock %}
{% block content %}
    <div class="row">
        <button class="btn btn-primary col-lg-2 ml-auto" data-toggle="modal" data-target="#goods_modal">添加商品</button>
    </div>
    <h1></h1>
    <!--商品列表-->
    <div class="row">
        <table class="table">
            <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品类型</th>
                <th>商品价格</th>
                <th>商品数量</th>
            </tr>
            </thead>
            <tbody>
              {% for good in my_page.object_list %}
                <tr>
                    <td>{{ good.index }}</td>
                    <td>
                        <a href="#">{{ good.name }}</a>
                    </td>
                    <td>{{ good.goodstype.name }}</td>
                    <td>{{ good.price }}</td>
                    <td>{{ good.number }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <h1></h1>
    <!--分页-->
    {% if search %}
        <div class="row">
            <ul class="pagination ml-auto">
                {% if my_page.has_previous %}
                    <li class="page-item">
                        <a class="page-link"
                           href="/bg/goods?page={{ my_page.previous_page_number }}&search={{ search }}">上一页</a>
                    </li>
                {% endif %}
                {% for page_num in page_range %}
                    {% if page == page_num %}
                        <li class="page-item active">
                            {% else %}
                        <li class="page-item">
                    {% endif %}
                <a class="page-link" href="/bg/goods?page={{ page_num }}&search={{ search }}">{{ page_num }}</a>
                </li>
                {% endfor %}
                {% if my_page.has_next %}
                    <li class="page-item">
                        <a class="page-link"
                           href="/bg/goods?page={{ my_page.next_page_number }}&search={{ search }}">下一页</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    {% else %}
        <div class="row">
            <ul class="pagination ml-auto">
                {% if my_page.has_previous %}
                    <li class="page-item">
                        <a class="page-link"
                           href="/bg/goods?page={{ my_page.previous_page_number }}">上一页</a>
                    </li>
                {% endif %}
                {% for page_num in page_range %}
                    {% if page == page_num %}
                        <li class="page-item active">
                            {% else %}
                        <li class="page-item">
                    {% endif %}
                <a class="page-link" href="/bg/goods?page={{ page_num }}">{{ page_num }}</a>
                </li>
                {% endfor %}
                {% if my_page.has_next %}
                    <li class="page-item">
                        <a class="page-link"
                           href="/bg/goods?page={{ my_page.next_page_number }}">下一页</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    {% endif %}
{% endblock %}

{% block js %}
    <div class="modal fade" id="goods_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-label="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">添加商品</div>
                <div class="modal-body">
                    <form class="form" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="form-group">
                            <label class="">商品名称</label>
                            <input class="form-control" type="text" name="goods_name">
                        </div>
                        <div class="form-group">
                            <label class="">商品类型</label>
                            <select class="form-control" name="goods_type">
                                {% for goodstypes in goodstypes_list %}
                                    <option value="{{ goodstypes.id }}">{{ goodstypes.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="">商品价格</label>
                            <input class="form-control" type="text" name="g_price">
                        </div>
                        <div class="form-group">
                            <label class="">商品保质期</label>
                            <input class="form-control" type="text" name="g_safe_date">
                        </div>
                        <div class="form-group">
                            <label class="">商品出场日期</label>
                            <input class="form-control" type="text" name="g_public_date">
                        </div>
                        <div class="form-group">
                            <label class="">商品数量</label>
                            <input class="form-control" type="text" name="goods_number">
                        </div>
                        <div class="form-group">
                            <label class="">商品描述</label>
                            <textarea class="form-control" name="g_description"></textarea>
                        </div>
                        <div class="form-group">
                            <label class="">商品图片</label>
                            <input class="form-control" type="file" name="g_picture">
                        </div>
                        <button class="btn btn-primary fa-pull-right" type="submit">提交商品</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}